<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border: 8px solid bisque;
            border-radius: 10px;
            margin: auto;
            margin-top: 220px;
        }
        tr :nth-child(1){
            width: 100px;
            height: 30px;
            text-align: center;
            margin-bottom: 8px;
            font-size: 18px;
            /* background-color: aquamarine; */
        }
        tr :nth-child(2){
            width: 250px;
            height: 30px;
            text-align: center;
            /* background-color: aquamarine; */
        }
        tr :nth-child(3){
            width: 100px;
            height: 30px;
            text-align: center;
            /* background-color: aquamarine; */
        }
        tr :nth-child(2) input{
            box-sizing: border-box;
            border-radius: 5px;
            width: 250px;
            height: 30px;
            text-align: left;
            margin-top: 8px;
            /* background-color: aquamarine; */
        }
        #refer{
            border: 0;
            background-color: cadetblue;
            border-radius: 5px;
            color: white;
            margin-top: 15px;
            font-size: 18px;
        }
        #refer:hover{
            background-color: green;
            box-shadow: 2px 2px 2px cadetblue;
            transition: all 0.3s;
        }
        .correct{
            color: green;
        }
        .error{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <table>
            <tr>
                <td>用&nbsp;&nbsp;户&nbsp;名:</td>
                <td><input type="text" id="name"></td>
                <td></td>
            </tr>
            <tr>
                <td>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱:</td>
                <td><input type="text" id="email"></td>
                <td></td>
            </tr>
            <tr>
                <td>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</td>
                <td><input type="text" id="password1" placeholder="至少8位,包含字母和数字"></td>
                <td></td>
            </tr>
            <tr>
                <td>确认密码:</td>
                <td><input type="text" id="password2"></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="3"><input type="button" value="确定" id="refer"></td>
            </tr>
        </table>
        
        <script>
            let name = document.querySelector("#name");
            let email = document.querySelector("#email");
            let password1 = document.querySelector("#password1");
            let password2 = document.querySelector("#password2");
            let refer = document.querySelector("#refer");

            function marchEmail(){  // 邮箱检查
                let str = email.value;
                let reg = /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/;
                if(!reg.test(str)){
                    email.parentElement.nextElementSibling.innerText="格式错误!";
                    email.parentElement.nextElementSibling.classList.remove("correct"); 
                    email.parentElement.nextElementSibling.classList.add("error");
                }else{
                    email.parentElement.nextElementSibling.innerText="√";
                    email.parentElement.nextElementSibling.classList.remove("correct");  // 移除error类名(用于红色字体样式)
                    email.parentElement.nextElementSibling.classList.add("correct");  // 添加correct类名(用于绿色字体样式)
                }
            }

            function marchPassword(){  // 密码检查
                let str = password1.value;
                let reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@#$%^&*!]{8,}$/;
                if(!reg.test(str)){
                    password1.parentElement.nextElementSibling.innerText="格式错误!";
                    password1.parentElement.nextElementSibling.classList.remove("correct"); 
                    password1.parentElement.nextElementSibling.classList.add("error");
                }else{
                    password1.parentElement.nextElementSibling.innerText="√";
                    password1.parentElement.nextElementSibling.classList.remove("correct"); 
                    password1.parentElement.nextElementSibling.classList.add("correct");
                }
            }

            function marchPassword2(){  // 密码二次输入
                if(password1.value != password2.value){
                    password2.parentElement.nextElementSibling.innerText="密码两次输入不一致!";
                    password2.parentElement.nextElementSibling.classList.remove("correct"); 
                    password2.parentElement.nextElementSibling.classList.add=("error");
                }else{
                    password2.parentElement.nextElementSibling.innerText="√";
                    password2.parentElement.nextElementSibling.classList.remove("error"); 
                    password2.parentElement.nextElementSibling.classList.add("correct");
                }
            }

            function noEmpty(inp){  // 非空检查
                inp.parentElement.nextElementSibling.innerText="请输入内容!";
                inp.parentElement.nextElementSibling.classList.remove("correct"); 
                inp.parentElement.nextElementSibling.classList.add("error");
            }

            name.onblur = nameex;
            function nameex(){
                if(name.value == ""){
                    noEmpty(name);
                }else{
                    name.parentElement.nextElementSibling.innerText="√";
                    name.parentElement.nextElementSibling.classList.remove("error"); 
                    name.parentElement.nextElementSibling.classList.add("correct");
                }
            }

            email.onblur = emailex;
            function emailex(){
                if(email.value == ""){
                    noEmpty(email);
                }else{
                    marchEmail();
                }
            }

            password1.onblur = password1ex;
            function password1ex(){
                if(password1.value == ""){
                    noEmpty(password1);
                }else{
                    marchPassword();
                }
            }
            password2.onblur = password2ex;
            function password2ex(){
                if(password2.value == ""){
                    noEmpty(password2);
                }else{
                    marchPassword2();
                }
            }

            refer.onclick = examine;
            function examine(){
                nameex();
                emailex();
                password1ex();
                password2ex();
            }

        </script>
    </div>
</body>
</html>